@use './_function.scss' as _function;
$app-namespace: 'app';

@mixin flex($direction: row) {
	display: flex;
	flex-direction: $direction;
}

@mixin fixed-top($zIndex: 1) {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: $zIndex;
}
@mixin fixed-bottom($zIndex: 1) {
	position: fixed !important;
	bottom: 0;
	/*  #ifndef  APP-NVUE  */
	padding-bottom: constant(safe-area-inset-bottom);
	/* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom);
	/* 兼容 iOS >= 11.2 */
	/*  #endif  */
	left: 0;
	right: 0;
	z-index: $zIndex;
}
@mixin absolute-full($zIndex: 1) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: $zIndex;
}
@mixin absolute-top($zIndex: 1) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: $zIndex;
}
@mixin absolute-bottom($zIndex: 1) {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: $zIndex;
}

@mixin pseudoClass($content: '') {
	content: $content;
	position: absolute;
}

/**
* 字号+行高
* @param {Number,Number} 字号,行高
*/
@mixin fontH($fs: 28, $lh: 0) {
	font-size: $fs + rpx;
	@if $fs == 28 {
		@if $lh == 0 {
			line-height: 40rpx;
		}
	} @else if $lh != 0 {
		line-height: $lh + rpx;
	}
}

// BEM命名混入--block
@mixin appBem_b($block) {
	// 定义一个BEM命名规范的block命名
	// for example : 'ide-button'
	// !global将覆盖全局变量
	$BEM_B: $app-namespace + '-' + $block !global;

	.#{$BEM_B} {
		// 占位符.调用这个混入函数时可将{}内的内容作为@content的内容
		// for example : @include bem(button){color:#000}  => .ide-button{color:#000}
		@content;
	}
}
// BEM命名混入--element
@mixin appBem_e($element) {
	// 定义一个BEM命名规范的element命名
	// for example : bem_e(text) => '.ide-button__text'
	$BEM_E: $element !global;
	$selector: &;
	$currentSelector: '';
	@each $unit in $element {
		$currentSelector: #{$currentSelector + '.' + $BEM_B + _function.$element-separator + $unit + ','};
	}
	@if hitAllSpecialNestRule($selector) {
		// 如果$selector是为修饰符、flag或伪类其中一项，则将@content放至&连接符中
		@at-root {
			#{$selector} {
				#{$currentSelector} {
					@content;
				}
			}
		}
	} @else {
		// 如果$selector不为修饰符、flag或伪类其中一项，则将@content放至当前调用bem_e的选择器中
		@at-root {
			#{$currentSelector} {
				@content;
			}
		}
	}
}
// BEM命名混入--modifier
@mixin appBem_m($modifier) {
	// 定义一个BEM命名规范的modifier命名
	// for example : bem_e(expand) => '.ide-button__text--expand'
	$selector: &;
	$currentSelector: '';
	@each $unit in $modifier {
		$currentSelector: #{$currentSelector + $selector + _function.$modifier-separator + $unit + ','};
	}

	@at-root {
		#{$currentSelector} {
			@content;
		}
	}
}

@mixin appWhen($state) {
	// @at-root选择器会将内部的样式编译至样式表的根部
	@at-root {
		&.#{_function.$state-prefix + $state} {
			@content;
		}
	}
}
$webkit: true !default;
$moz: true !default;
$ms: true !default;
$o: true !default;
// 依据option内的css属性浏览器前缀相关配置项，决定传入的css属性应使用哪些浏览器前缀
@mixin prefixed($property, $value) {
	// #ifdef H5
	@if $webkit == true {
		-webkit-#{$property}: #{$value};
	}

	@if $moz == true {
		-moz-#{$property}: #{$value};
	}

	@if $ms == true {
		-ms-#{$property}: #{$value};
	}

	@if $o == true {
		-o-#{$property}: #{$value};
	}
	// #endif
	#{$property}: #{$value};
}

// set css var value
// @include set-css-var-value(color, red);
// --color: red;
@mixin set-app-css-var-value($name, $value) {
	--#{$name}: #{$value};
}
